<template>
  <div
    class="main-container"
    style="padding: 20px; max-width: 900px; margin: auto"
  >
    <!-- 上侧操作区域 -->
    <div
      class="top-bar"
      style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px"
    >
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索内容"
        clearable
        style="flex: 1"
        id="search-input"
      />
      <el-button
        type="primary"
        @click="handleAdd"
        id="add-button"
        >添加</el-button
      >
      <el-button
        type="success"
        @click="handleSearch"
        id="search-button"
        >搜索</el-button
      >
      <el-button
        @click="startIntro"
        style="margin-left: auto"
        >新手引导</el-button
      >
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="pagedData"
      style="width: 100%"
      id="data-table"
      :row-key="(row) => row.id"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="80"
      />
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        label="操作"
        width="180"
      >
        <template #default="{ row, $index }">
          <el-button
            size="small"
            type="primary"
            @click="handleDetail(row)"
            :id="$index === 0 ? 'detail-button-0' : undefined"
            >详情</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <div style="margin-top: 20px; text-align: right">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="filteredData.length"
        v-model:current-page="currentPage"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import introJs from "intro.js";
import "intro.js/introjs.css";

interface User {
  id: number;
  name: string;
}

const rawData = ref<User[]>([
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
  { id: 3, name: "王五" },
  { id: 4, name: "赵六" },
  { id: 5, name: "钱七" },
  { id: 6, name: "孙八" },
]);

const searchKeyword = ref("");
const currentPage = ref(1);
const pageSize = 3;

// 过滤数据
const filteredData = computed(() => {
  if (!searchKeyword.value.trim()) return rawData.value;
  return rawData.value.filter((user) =>
    user.name.includes(searchKeyword.value.trim())
  );
});

// 当前页数据
const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredData.value.slice(start, start + pageSize);
});

function handleAdd() {
  const newId = rawData.value.length
    ? Math.max(...rawData.value.map((u) => u.id)) + 1
    : 1;
  rawData.value.push({ id: newId, name: `新用户${newId}` });
  ElMessage.success("添加成功");
}

function handleSearch() {
  currentPage.value = 1; // 搜索后回到第一页
}

function handleDetail(row: User) {
  ElMessage.info(`查看详情：${row.name}`);
}

function handleDelete(id: number) {
  ElMessageBox.confirm("确定删除该用户吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      rawData.value = rawData.value.filter((u) => u.id !== id);
      ElMessage.success("删除成功");
      // 如果当前页数据为空，且不是第一页，页码减一
      if (pagedData.value.length === 0 && currentPage.value > 1) {
        currentPage.value--;
      }
    })
    .catch(() => {
      // 取消删除
    });
}

// 新手引导
function startIntro() {
  nextTick(() => {
    const intro = introJs();

    intro.setOptions({
      steps: [
        {
          element: "#add-button",
          intro: "点击这里添加新用户",
          position: "bottom",
        },
        {
          element: "#search-button",
          intro: "点击这里进行数据搜索",
          position: "bottom",
        },
        {
          element: "#data-table",
          intro: "这里展示搜索结果数据",
          position: "top",
        },
        {
          element: "#detail-button-0",
          intro: "点击这里查看用户详情",
          position: "left",
        },
      ],
      showStepNumbers: true,
      exitOnOverlayClick: false,
      exitOnEsc: true,
      nextLabel: "下一步",
      prevLabel: "上一步",
      doneLabel: "完成",
      skipLabel: "跳过",
    });

    intro.start();
  });
}
</script>

<style scoped>
/* 你可以根据需要自定义样式 */
</style>
